/* eslint-disable react/jsx-no-useless-fragment */
/* eslint-disable default-param-last */
/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable react/no-unstable-nested-components */
/* eslint-disable no-shadow */
/* eslint-disable no-debugger */
/* eslint-disable react/no-array-index-key */

/**
 * 常规表单布局结构
 * @Author Lianqi
 * @Date 2022-7-8
 * @description
 *  适应表单layout属性为：
 *  VERTICAL: 'vertical', // 单列垂直布局
 *  HORIZONAL: 'horizonal', // 单列水平布局
 *  INLINE: 'inline', // 行内布局
 */
import FormButtonBar from './FormButtonBar'
import FormLayoutAntd from './FormLayoutAntd'
import FormLayoutGrid from './FormLayoutGrid'
import { MODE, FIELD_MODE, LAYOUT, GRID_COL_COUNT, GRID_LABEL_WIDTH } from '../config/Constant'

function FormLayout(props) {
  // props
  const {
    mode: formMode = MODE.EDIT,
    name: tableName,
    fields,
    initialValues = {},
    layoutProps,
    labelProps,
    handleReset,
    submitButton = { show: false, label: '', icon: '' },
    resetButton = { show: false, label: '', icon: '' },
    extraTail,
    ...restFormProps
  } = props

  // formParams {}
  const formParams = {
    labelProps,
    grid: {},
  }
  const {
    layout,
    gridConfig = layout === LAYOUT.GRID
      ? { colCount: GRID_COL_COUNT, labelWidth: GRID_LABEL_WIDTH }
      : null,
  } = layoutProps || {}
  if (layout === LAYOUT.GRID) {
    const { colCount } = gridConfig
    formParams.grid.colCount = colCount // 表单总列数，1个字段为1列
    formParams.grid.labelWidth = gridConfig.labelWidth // 表格标签所占宽度
  }

  // fieldList []
  const fieldList = fields?.map((field, index) => {
    const {
      name,
      label,
      text,
      // display = true,
      mode: fieldMode = FIELD_MODE.EDIT,
      labelCol = null,
      wrapperCol = null,
      labelProps,
      rules = [],
      layoutProps = {}, // grid
      ...restFieldProps
    } = field
    const key = `${tableName}_${name}_${index}`

    // formItem props
    const formitemprops = {
      name,
      rules,
    }
    if (layout !== LAYOUT.GRID) {
      formitemprops.label = label
      formitemprops.labelCol = labelCol
      formitemprops.wrapperCol = wrapperCol
    }

    // control props
    const controlProps = {
      key,
      name,
      value: initialValues[field.name],
      // controlType: restFieldProps.controlType,
      // options: restFieldProps.options,
      // codeKey: restFieldProps.codeKey,
      // uselessOptions: restFieldProps.uselessOptions,
      // disabledOptions: restFieldProps.disabledOptions,
      // disabled: restFieldProps.disabled,
      ...restFieldProps,
    }

    // field {}
    return {
      key,
      name,
      label,
      mode: fieldMode,
      labelProps,
      formitemprops,
      controlProps,
      layoutProps,
      ...restFieldProps,
    }
  })

  // render
  const buttonBar = (
    <FormButtonBar
      mode={formMode}
      extraTail={extraTail}
      resetButton={resetButton}
      handleReset={handleReset}
      submitButton={submitButton}
    />
  )

  return (
    <>
      {layout !== LAYOUT.GRID ? (
        <>
          <FormLayoutAntd
            mode={formMode}
            name={tableName}
            fieldList={fieldList}
            {...restFormProps}
          />
          {buttonBar}
        </>
      ) : (
        <FormLayoutGrid
          mode={formMode}
          name={tableName}
          formParams={formParams}
          fieldList={fieldList}
          buttonBar={buttonBar}
          {...restFormProps}
        />
      )}
    </>
  )
}

export default FormLayout
